<template>
	<div class="add_function">
		<h1 class="title">功能添加/关闭</h1>
		<!-- 所有功能列表 -->
		<div class="function_list_info" v-if="showIndex===0">
			<h6>你可以添加下列需要的功能，丰富宝店能力和体验</h6>
			<div class="function_lists">
				<div class="function_list" v-for="item in listData" @click="goDetail(item)">
					<img :src="item.icon" alt="">
					<div class="text">
						<h5>{{ item.module_name }}</h5>
						<p>{{ item.descript }}</p>
					</div>
					<div class="is_add" v-if="item.is_open===1">已添加</div>
					<p></p>
				</div>
			</div>
		</div>
		<!-- 功能详情 -->
		<div class="function_detail" v-if="showIndex===1">
			<h5><span @click="showIndex=0">添加功能</span>&thinsp;/&thinsp;功能详情</h5>
			<div class="content" v-if="selArr.length>0">
				<div class="is_opens">
					<div class="is_open">
						<img :src="selArr[0].icon" alt="">
						<div>
							<h6>{{ selArr[0].module_name }}</h6>
							<p v-if="selArr[0].is_open===1">已开通</p>
							<p v-if="selArr[0].is_open===0">未开通</p>
						</div>
					</div>
					<button v-if="selArr[0].is_open===0" @click="opens">开通</button>
					<button v-if="selArr[0].is_open===1" @click="stops" style="background:#F56C6C;">停用</button>
				</div>
				<div class="function_infos">
					<h4>
						<span class="el-icon-tickets" style="color: #63ade0;"></span>
						<p>功能介绍</p>
					</h4>
					<div class="func_content" v-html="selArr[0].content"></div>
					<h4 style="margin-top:36px;">
						<span class="el-icon-warning" style="color: #f86161;"></span>
						<p>声明</p>
					</h4>
					<p>●在使用卡券功能时，须遵守公众平台以及卡券相关协议，、<span>《阿宝平台卡券功能服务条款》</span>、<span>《阿宝卡券功能使用规则》</span>、。</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {setCookie, getCookie, removeCookie, clearCookie} from '@/assets/js/cookie.js'
	export default{
		name :'add_function',
		data(){
			return{
				appli: {}, //服务号信息
				showIndex: 0,
				listData: [], //所有功能列表
				selArr: [], //选中的功能信息
			}
		},
		created(){
			this.appli = JSON.parse(localStorage.getItem('appli'));
		},
		mounted(){
			this.getFunctionList();
		},
		methods:{
			//功能列表
			getFunctionList(){
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.user_product_id = this.appli.id;
				this.$axiosPost('/api/moduleaaa/showFunction', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.code === 200){
						this.listData = res.data;
					}
				})
			},
			//详情
			goDetail(obj){
				this.selArr = [];
				this.selArr.push(obj);
				console.log(this.selArr[0].content);
				this.showIndex = 1;
			},
			//开通
			opens(){
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.user_product_id = this.appli.id;
				obj.status = 1;
				obj.module_id = this.selArr[0].id;
				this.$axiosPost('/api/moduleaaa/useredit', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.status === 1){
						this.$set(this.selArr[0],'is_open',1);
						this.$message.success('开通成功');
					}
				})
			},
			//停用
			stops(){
				let self = this;
				this.$confirm('是否确定停用？','提示',{
					type: 'warning'
				}).then(()=>{
					let obj = {};
					obj.userinfo = {
						uid: getCookie('UID'),
						token: getCookie('TOKEN')
					};
					obj.user_product_id = self.appli.id;
					obj.user_module_id = self.selArr[0].user_module_id;
					self.$axiosGet('/api/moduleaaa/delFunc', {
						data: JSON.stringify(obj)
					}).then(res => {
						if(res.code === 200){
							self.$set(self.selArr[0],'is_open',0);
							self.$message.success('操作成功');
						}
					})
				}).catch(()=>{

				})
			},
		},
		components:{

		},
	}
</script>
<style lang="less" scoped>
	.add_function{
		text-align: left;
		.title{
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;
			border-top: 1px solid #cdcdcd;
			border-bottom: 1px solid #cdcdcd;

		}
		.function_list_info{
			>h6{
				font-size: 18px;
				color: #666;
				font-weight: 400;
				padding: 34px 34px 12px 34px;
			}
			.function_lists{
				display: flex;
				flex-wrap: wrap;
				.function_list{
					width: 45%;
					height: 94px;
					border: 1px solid #e7e7eb;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 24px 0 0 36px;
					cursor: pointer;
					position: relative;
					padding: 0 0 0 20px;
					&:hover{
						background: #f4f5f9;
					}
					img{
						width: 50px;
						height: 50px;
					}
					.text{
						width: 280px;
						height: 64px;
						h5{
							font-size: 14px;
							color: #000;
							font-weight: 400;
						}
						p{
							font-size: 13px;
							color: #8d8d8d;
							margin-top: 10px;
						}
					}
					.is_add{
						position: absolute;
						right: 50px;
						top: 50%;
						transform: translateY(-50%);
						height: 64px;
						line-height: 64px;
						font-size: 14px;
						color: #3ca0ec;
						white-space: nowrap;
					}
					>p{
						width: 10px;
						height: 10px;
						border-top: 1px solid #bebebe;
						border-right: 1px solid #bebebe;
						transform: rotate(45deg);
						margin-right: 16px;
					}
				}
			}
		}
		.function_detail{
			background: #f6f8f9;
			>h5{
				height: 76px;
				font-size: 14px;
				color: #9d9c9b;
				font-weight: 400;
				padding: 20px 0 0 6px;
				span{
					color: #3ba2ed;
					cursor: pointer;
					&:hover{
						text-decoration: underline;
					}
				}
			}
			.content{
				width: 99%;
				margin-left: 1%;
				background: #fff;
				padding: 40px 0 40px 10px;				
				.is_opens{
					width: 80%;
					height: 74px;
					background: #f4f5f9;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 26px;
					margin-left: 5%;
					.is_open{
						display: flex;
						align-items: center;
						img{
							width: 50px;
							height: 50px;
							border-radius: 50%;
							margin-right: 12px;
						}
						>div{
							h6{
								font-size: 16px;
								color: #000;
								font-weight: 400;
							}
							p{
								font-size: 16px;
								color: #95898b;
							}
						}
					}
					button{
						width: 104px;
						height: 30px;
						line-height: 30px;
						background: #3ca0ec;
						font-size: 16px;
						color: #fff;
						border-radius: 5px;
					}
				}
				.function_infos{
					margin: 44px 0 38px 0;
					h4{
						display: flex;
						align-items: center;
						p{
							font-size: 14px;
							color: #666;
							font-weight: 400;
							margin-left: 9px;
						}
					}
					.func_content{
						font-size: 14px;
						color: #9d9d9d;
						margin: 8px 0 0 2%;
						padding: 0 20px 0 0;
					}
					>p{
						font-size: 14px;
						color: #9d9d9d;
						margin: 5px 0 0 2%;
						span{
							color: #5a678d;
							cursor: pointer;
							&:hover{
								text-decoration: underline;
							}
						}
					}
				}
			}
		}
	}
</style>